@using Microsoft.AspNetCore.Mvc.TagHelpers
@model LoginCommand
@{
  ViewData["Title"] = "用户登录";
  Layout = "~/Views/Shared/_HeadlessLayout.cshtml";
  var returnUrl = ViewBag.ReturnUrl;
}

<div class="container">
  <div class="row justify-content-center align-items-center min-vh-100">
    <div class="col-md-6 col-lg-4">
      <div class="card shadow-sm">
        <div class="card-body p-4">
          <h3 class="text-center mb-4">欢迎使用 DaprPlus</h3>

          <!-- 登录方式切换 -->
          <div class="mb-4">
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="loginType" id="passwordLogin" value="password" checked>
              <label class="form-check-label" for="passwordLogin">密码登录</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="loginType" id="codeLogin" value="code">
              <label class="form-check-label" for="codeLogin">验证码登录</label>
            </div>
          </div>

          <!-- 统一登录表单 -->
          <form id="loginForm" asp-action="Login" method="post">
            <input type="hidden" name="loginType" id="loginTypeInput" value="password">

            <div class="mb-3">
              <input type="text" class="form-control" asp-for="Account" id="accountInput" value="admin" placeholder="登录账号" required>
              <span asp-validation-for="Account" class="text-danger"></span>
              <div class="form-text" id="accountHelp">用户名/邮箱/手机号</div>
            </div>

            <!-- 密码输入框 -->
            <div class="mb-3 password-group">
              <input type="password" class="form-control" asp-for="Password" value="gmf31529019" placeholder="登录密码">
              <span asp-validation-for="Password" class="text-danger"></span>
            </div>

            <!-- 验证码输入框 -->
            <div class="mb-3 code-group" style="display: none;">
              <div class="input-group">
                <input type="text" class="form-control" asp-for="Password" placeholder="登录验证码">
                <button class="btn btn-outline-secondary" type="button" id="sendCode">发送验证码</button>
              </div>
              <span asp-validation-for="Password" class="text-danger"></span>
            </div>

            <div class="form-check mb-3">
              <input type="checkbox" class="form-check-input" asp-for="IsRemember" id="rememberMe">
              <label class="form-check-label" for="rememberMe">记住登录</label>
            </div>

            <input type="hidden" asp-for="ReturnUrl" id="returnUrl" value="@returnUrl"/>
            <button type="submit" class="btn btn-primary w-100">登录</button>
          </form>

          <div class="text-center mt-3">
            <a href="/register" class="text-decoration-none">新用户注册</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@section Scripts {
  <script>
    $(document).ready(function () {
        // 验证账号格式
        function validateAccount(account, loginType) {
            const emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
            const phoneRegex = /^1[3-9]\d{9}$/;
            const accountInput = $('#accountInput');

            if (!account) {
                accountInput.addClass('is-invalid');
                $('#accountError').text('请输入账号');
                return false;
            }

            if (loginType === 'code') {
                if (!emailRegex.test(account) && !phoneRegex.test(account)) {
                    accountInput.addClass('is-invalid');
                    $('#accountError').text('验证码登录只支持邮箱或手机号');
                    return false;
                }
            }

            accountInput.removeClass('is-invalid');
            $('#accountError').text('');
            return true;
        }

        // 登录方式切换
        $('input[name="loginType"]').change(function () {
            var loginType = $(this).val();
            $('#loginTypeInput').val(loginType);
            const account = $('#accountInput').val();

            if (loginType === 'password') {
                $('.password-group').show();
                $('.code-group').hide();
                $('input[name="Password"]').prop('required', true);
                $('input[name="Code"]').prop('required', false);
                $('#accountHelp').text('用户名/邮箱/手机号');
            } else {
                $('.password-group').hide();
                $('.code-group').show();
                $('input[name="Password"]').prop('required', false);
                $('input[name="Code"]').prop('required', true);
                $('#accountHelp').text('邮箱/手机号');
                validateAccount(account, 'code');
            }
        });

        // 账号输入验证
        $('#accountInput').on('input', function () {
            const loginType = $('#loginTypeInput').val();
            validateAccount($(this).val(), loginType);
        });

        // 发送验证码
        $('#sendCode').click(function () {
            var account = $('#accountInput').val();
            if (!validateAccount(account, 'code')) {
                return;
            }

            // 禁用按钮并开始倒计时
            var btn = $(this);
            var seconds = 60;
            btn.prop('disabled', true);

            var timer = setInterval(function () {
                if (seconds > 0) {
                    btn.text(seconds + '秒后重试');
                    seconds--;
                } else {
                    clearInterval(timer);
                    btn.prop('disabled', false);
                    btn.text('发送验证码');
                }
            }, 1000);

            // 发送验证码的 Ajax 请求
            $.post('/Authentication/SendCode', { account: account });
        });

        // 表单提交前验证
        $('#loginForm').submit(function (e) {
            const loginType = $('#loginTypeInput').val();
            const account = $('#accountInput').val();

            if (!validateAccount(account, loginType)) {
                e.preventDefault();
                return;
            }

            if (loginType === 'password' && !$('input[name="Password"]').val()) {
                alert('请输入密码');
                e.preventDefault();
            } else if (loginType === 'code' && !$('input[name="Code"]').val()) {
                alert('请输入验证码');
                e.preventDefault();
            }
        });
    });
  </script>
}
